<template>
	<div class="page">
		<div class="body">
			<div class="left-side">
				<div class="logo">
					<i class="icon"><img src="../../static/images/logo.png"></i>
					<h2>项目管理系统</h2>
				</div>


				<el-menu :default-openeds="['0', '0']" :unique-opened="true">
					<el-menu-item index="4">
						<i class="el-icon-s-home"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-setting"></i>系统配置</template>
						<router-link to="/home/menu"><el-menu-item index="2-1">菜单管理</el-menu-item></router-link>
						<el-menu-item index="2-2">管理员设置</el-menu-item>
						<el-menu-item index="2-3">权限分配</el-menu-item> 
						<el-menu-item index="2-4">用户管理</el-menu-item>
						<el-menu-item index="2-5">系统日志</el-menu-item>
					</el-submenu>
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-set-up"></i>项目管理</template>
						<el-menu-item index="1-1">项目配置</el-menu-item>
						<el-menu-item index="1-2">项目管理</el-menu-item>
						<el-menu-item index="1-3">项目动态</el-menu-item>
						<el-menu-item index="1-4">文件下载</el-menu-item>
					</el-submenu>					
					
				</el-menu>
			</div>
			<div class="right">
				<div class="top-wrap">
					<div class="t-l">
						<el-breadcrumb separator="/">
							<el-breadcrumb-item :to="{ path: '/' }"><a href="/"><i class="el-icon-s-home m-r1 "></i>首页</a></el-breadcrumb-item>
							<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
							<el-breadcrumb-item><a href="/">活动列表</a></el-breadcrumb-item>
							<el-breadcrumb-item><a href="/">活动详情</a></el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<div class="t-r">
						<el-avatar :size="30" :src="circleUrl"></el-avatar>
						<span class="user m-l1">张三</span>，
						<span>超级管理员</span>
						<span class="el-icon-switch-button logout-btn" @click="logout"></span>
					</div>
				</div>
				<div class="contain-box">
					<router-view></router-view>
				</div>
				<div class="copyright">备案号：<a href="https://beian.miit.gov.cn/">粤ICP备 2020080755号-1</a>，Copyright 2023 by 广州瑞丰生物科技有限公司</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
			}
		}, 
		created() {

		}, 
		mounted() {

		}, 
		methods: {
			logout(){
				this.$confirm('确定退出登录吗？').then(()=> {
					console.log('退出') 
				})
				.catch(()=> {});
			}
		},
		computed: {

		},
		components: {

		},
	}
</script>

<style lang="less" scoped>
	.page,
	.body {
		height: 100%;
		overflow-y: hidden;
	}

	.body {
		display: flex;

		.left-side {
			height: 100%;
			width: 200px;
			flex-shrink: 0;
			background: #fff;
		}

		.right {
			flex-grow: 2;
			min-width: 1000px;
		}
	}

	.logo {
		margin: 20px 0 40px;

		.icon {
			display: block;
			width: 144px;
			margin: 0 auto;
		}

		h2 {
			margin-top: -40px;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
		}
	}

	.right {
		.top-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			background: #185efe;
			.t-l{
				padding-left: 20px;
				a{
					color: #fff !important;
					font-weight: 100;
					&:hover{
						color:#ccc!important;
					}
				}  
			}
			.t-r {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20px;
				color: #fff;
				span {
					color: #fff;
				}
				.logout-btn{
					cursor: pointer;
					margin-left: 20px;
					font-size: 24px;
				}
			}
		}
	}

	.contain-box {
		height: calc(100% - 90px);
		overflow-y: auto;
	}
	.copyright{
		height:30px;
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		color:#666; 
	}
</style>
